<template>
  <div class="first_box" id="first_box" style="outline: none">
    <div class="preloader_card"></div>
    <div class="preloader_card card_box"></div>
    <div class="preloader_card card_box"></div>
    <div class="preloader_card card_box">
      <div class="title">
        <svg viewBox="0 0 160 160" fill="none" xmlns="http://www.w3.org/2000/svg" class="title-icon">
          <path fill-rule="evenodd" clip-rule="evenodd"
            d="M66 17H94V41H66V17ZM55 24.2466C33.2095 33.8594 18 55.6533 18 81C18 115.242 45.7583 143 80 143C114.242 143 142 115.242 142 81C142 55.6533 126.791 33.8594 105 24.2466V37.689C119.945 46.334 130 62.4927 130 81C130 108.614 107.614 131 80 131C52.3857 131 30 108.614 30 81C30 62.4927 40.0552 46.334 55 37.689V24.2466Z"
            fill="url(#paint0_linear_5371_6745)" />
          <path d="M89 56H71V115H89V56Z" fill="url(#paint1_linear_5371_6745)" />
          <defs>
            <linearGradient id="paint0_linear_5371_6745" x1="80" y1="17" x2="80" y2="143"
              gradientUnits="userSpaceOnUse">
              <stop stop-color="#30D7F1" />
              <stop offset="0.509925" stop-color="#80F94B" />
              <stop offset="1" stop-color="#F9E444" />
            </linearGradient>
            <linearGradient id="paint1_linear_5371_6745" x1="80" y1="17" x2="80" y2="115"
              gradientUnits="userSpaceOnUse">
              <stop stop-color="#30D7F1" />
              <stop offset="0.459849" stop-color="#79FA4B" />
              <stop offset="1" stop-color="#F9E344" />
            </linearGradient>
          </defs>
        </svg>
        InsBean
      </div>
    </div>
  </div>
</template>

<script setup>
import { gsap } from 'gsap'
import { onMounted } from 'vue'

const emit = defineEmits(['load'])

onMounted(() => {
  document.getElementById('first_box').style.position = 'fixed'
  const tl = gsap.timeline()
  tl.fromTo(
    '.preloader_card',
    {
      left: '120%',
      filter: 'grayscale(1)'
    },
    {
      left: '50%',
      stagger: 0.1,
    },
  )
    .to(
      '.card_box',
      {
        width: '110vw',
        height: '110vh',
        stagger: 0.1,
        ease: 'power1.in',
        duration: 0.3,
        filter: 'grayscale(0)'
      },
      '+=1',
    )
    .then(() => {
      emit('load')
    })
})
</script>

<style scoped lang="less">
.first_box {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  bottom: 0;
  z-index: 100;
  background-image: linear-gradient(277deg,
      rgb(252, 227, 68) -2.48%,
      rgb(121, 250, 75) 47.21%,
      rgb(48, 215, 241) 93.62%);
  overflow: hidden;
}

.title {
  color: aliceblue;
  font-size: 12vw;
  font-weight: 800;
  text-align: center;
  line-height: 50px;
  position: relative;
  transform: translate(-120%, 0);
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;

  .title-icon {
    width: 15vw;
    height: 15vw;
  }

  .marginAuto();
  .transformTop();
}

@media screen and (min-width: 501px) {
  .title {
    font-size: 5vw;

    .title-icon {
      width: 8vw;
      height: 8vw;
    }
  }
}

.preloader_card {
  @media screen and (min-width: 1025px) {
    width: 50vw;
    height: 50vh;
  }

  @media screen and (min-width: 501px) and (max-width: 1024px) {
    width: 70vw;
    height: 80vw;
  }

  @media screen and (max-width: 500px) {
    width: 77vw;
    height: 136vw;
  }

  border-radius: 2vw;
  position: absolute;
  .transformAll();
  left: 120%;
}

.preloader_card:nth-child(1) {
  background-color: rgb(84, 105, 108);
}

.preloader_card:nth-child(2) {
  background-color: rgb(69, 92, 96);
}

.preloader_card:nth-child(3) {
  background-color: rgb(36, 67, 72);
}

.preloader_card:nth-child(4) {
  background-color: rgb(0, 32, 37);
}
</style>
